
import React, { useState, useEffect, useRef } from 'react';
import { Image, Skeleton } from 'react-vant';
import styles from './community.module.css';
import useTitle from '@/hooks/useTitle';

// 模拟文章数据生成函数
const generateArticles = (startId, count) => {
  return Array.from({ length: count }, (_, i) => ({
    id: (startId + i).toString(),
    content: `${startId + i}这是一个测试标题，长度可能会有所不同，用于测试自适应布局效果${i % 3 === 0 ? '，这里增加一些额外的文本以测试多行显示' : ''}`,
    images: [`https://picsum.photos/id/${237 + i}/600/${300 + (i % 5) * 100}`],
    isVideo: i % 5 === 0
  }));
};

const Community = () => {
  useTitle("社区");
  const [articles, setArticles] = useState(generateArticles(1, 6));
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const loadMoreRef = useRef(null);

  // 无限滚动实现
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const target = entries[0];
        if (target.isIntersecting && !loading) {
          loadMore();
        }
      },
      { threshold: 0.1 }
    );

    if (loadMoreRef.current) {
      observer.observe(loadMoreRef.current);
    }

    return () => {
      if (loadMoreRef.current) {
        observer.unobserve(loadMoreRef.current);
      }
    };
  }, [loading]);

  // 加载更多数据
  const loadMore = () => {
    setLoading(true);
    // 模拟网络请求延迟
    setTimeout(() => {
      const newPage = page + 1;
      const newArticles = generateArticles((newPage - 1) * 6 + 1, 6);
      setArticles((prevArticles) => [...prevArticles, ...newArticles]);
      setPage(newPage);
      setLoading(false);
    }, 1000);
  };

  return (
    <div className={styles.container}>
      <div className={styles['feed-container']}>
        {articles.map((article) => (
          <div key={article.id} className={styles['article-card']}>
            <div style={{ position: 'relative' }}>
              <Image
                className={styles['article-image']}
                src={article.images[0]}
                alt={article.content}
                fit="cover"
                style={{ aspectRatio: '3/4' }} // 设置图片宽高比，确保一致性
              />
              {article.isVideo && (
                <div className={styles['video-tag']}>
                  <svg className={styles['video-icon-svg']} viewBox="0 0 1024 1024" width="14" height="14" fill="white">
                    <path d="M912 272H112c-8.84 0-16 7.16-16 16v448c0 8.84 7.16 16 16 16h800c8.84 0 16-7.16 16-16V288c0-8.84-7.16-16-16-16zm-40 432H152V320h720v384z" />
                    <path d="M405.784 512.016L645.504 391.936c7.936-4.096 7.936-14.336 0-18.432L405.784 351.984c-11.264-5.632-24.576 2.56-24.576 15.36v128.064c0 12.8 13.312 20.992 24.576 15.36z" />
                  </svg>
                </div>
              )}
            </div>
            <div className={styles['article-content']}>
              <div className={styles['article-title']}>{article.content}</div>
            </div>
          </div>
        ))}
        <div ref={loadMoreRef} className={styles['loading-container']}>
          {loading && (
            <div className={styles['loading-indicator']}>
              <Skeleton title avatar paragraph={{ rows: 1 }} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Community;
